<template>
<div class="container-app">
    <div class="hot-container">
        <!-- 标题，，-- tab栏切换 -->
        <div class="hot-header">
            <van-tabs v-model="active" :line-width="0" :ellipsis="false" @click="selectTabs">
            <van-tab title="待映推荐"></van-tab>
            <van-tab title="即将上映"></van-tab>
            <van-tab title="新片想看榜"></van-tab>
            </van-tabs>
            <div class="hot-right">
                <span style="display: inline-block; width:15vw">全部 &nbsp;{{moviewTotal}}</span>
               <van-icon name="arrow" />
            </div>
        </div>
        <!-- 推荐1 -->
        <div v-show="active === 0">
               <!-- 轮播图 -->
                <div class="swiper-container">
                    <div class="swiper-wrapper">
                        <div   @click="$router.push(`/prodetail/?name=${item.name}`)" v-for="(item,index) in list" :key="index" class="swiper-slide">
                            <!-- <h3>{{ item.title }}</h3> -->
                            <img :src="item.url" alt=""/>
                             <div class="number">{{item.number}}</div>
                           <span style=" margin-top: 2vw;">
                             {{item.name}}
                           </span>
                           <div class="time">
                            <span>{{item.time}}</span>
                           </div>
                           <div class="admin-button">
                             想看
                           </div>
                            <!-- <el-button>立即办理</el-button> -->
                        </div>
                    </div>
                    <!-- <div class="swiper-pagination"></div> -->
                </div>
        </div>
        <!-- 即将上映 -->
         <div v-show="active === 1">
               <!-- 轮播图 -->
                <div class="swiper-container">
                    <div class="swiper-wrapper">
                        <div v-for="(item,index) in list2" :key="index" class="swiper-slide">
                            <!-- <h3>{{ item.title }}</h3> -->
                            <img :src="item.url" alt=""/>
                            <div class="number">{{item.number}}</div>
                           <span style=" margin-top: 2vw;">
                             {{item.name}}
                           </span>
                           <div class="time">
                            <span>{{item.time}}</span>
                           </div>
                           <div class="admin-button">
                             想看
                           </div>
                            <!-- <el-button>立即办理</el-button> -->
                        </div>
                    </div>
                    <!-- <div class="swiper-pagination"></div> -->
                </div>
        </div>
        <div v-show="active ===2">
            <div class="admin-empty">
            <van-empty :image-size="120" description="暂无内容" />
          </div>
        </div>
    </div>
</div>
</template>

<script>
import Swiper from 'swiper'
import 'swiper/css/swiper.min.css'
export default {
  name: 'PannelPage',
  components: {},
  data () {
    return {
      active: 0,
      swiper: null,
      moviewTotal: 5,
      list: [
        {
          name: '封神第二部:战火西岐', url: require('@/assets/commont/dytj1.jpg'), number: '91.4W想看', time: '25年1月29日上映'
        },
        {
          name: '哪吒之魔童闹海', url: require('@/assets/commont/dytj2.jpg'), number: '13.1W想看', time: '25年1月29日上映'
        },
        {
          name: '美国队长4', url: require('@/assets/commont/dytj3.jpg'), number: '2.1W想看', time: '2025年上映'
        },
        {
          name: '射雕英雄传:侠之大者', url: require('@/assets/commont/dytj4.jpg'), number: '82.7W想看', time: '25年1月29日上映'
        },
        {
          name: '戏台', url: require('@/assets/commont/dytj5.jpg'), number: '2031想看', time: '2025年上映'
        }
      ],
      list2: [
        { name: '爱有天意', url: require('@/assets/commont/jjsy1.jpg'), number: '818想看', time: '12月25日上映' },
        { name: '魔法森林小精灵', url: require('@/assets/commont/jjsy2.png'), number: '378想看', time: '12月25日上映' },
        { name: '极限守护', url: require('@/assets/commont/jjsy3.jpg'), number: '37想看', time: '12月26日上映' },
        { name: '小小的我', url: require('@/assets/commont/jjsy4.jpg'), number: '61.4万想看', time: '12月27日上映' },
        { name: '曾经的我们', url: require('@/assets/commont/jjsy5-2.jpg'), number: '8549想看', time: '12月28日上映' },
        { name: '猎人克莱文', url: require('@/assets/commont/jjsy6.jpg'), number: '49想看', time: '12月23日上映' }
      ]
    }
  },
  methods: {
    selectTabs (e) {
      if (e === 0) {
        this.getSwiper()
        this.moviewTotal = 5
      } else if (e === 1) {
        this.moviewTotal = 6
      } else {
        this.moviewTotal = null
      }
    },
    getSwiper () {
      this.swiper = new Swiper('.swiper-container', {
        // loop: true, // 无缝
        // autoplay: { // 自动开始
        //   delay: 3000, // 时间间隔
        //   disableOnInteraction: false //* 手动操作轮播图后不会暂停*
        // },
        paginationClickable: true,
        slidesPerView: 3.7, // 一组三个
        spaceBetween: 10, // 间隔
        // 如果需要前进后退按钮
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev'
        },
        // 窗口变化,重新init,针对F11全屏和放大缩小,必须加
        observer: true,
        observeParents: true
      })
    }

  },
  mounted () {
    this.getSwiper()
  }
}
</script>

<style lang="less" scoped>
.container-app{
    padding: 0;
    background-color: #fff;
    margin-top: 2vw;
    border-radius: 3vw;
}
.admin-empty{
  height: 44vw;
  padding: 0 5vw;
  .van-empty{
    height: 100%;
  }
}
    .hot-container {
        width: 100%;
        padding: 3vw 3vw;
        .hot-header{
            width: 100%;
            display: flex;
            justify-content: space-between;
            ::v-deep .van-tab--active{
                padding: 0;
                font-size: 4.5vw;
                font-weight:800;
            }
            .hot-right{
                width: 20vw;
                height: 100%;
                margin-top: 4%;
                font-size: 3.4vw;
                color: rgb(139, 144, 148);
            }
        }
        .swiper-slide {
            position: relative;
            height: 54vw;
            width: 36vw;
            background-repeat: no-repeat;
            background-size: contain;
            // background-color: pink;
            img{
                height: 55%;
                width: 100%;
            }
            span{
                display: inline-block;
                width: 15vw;
                // 文字超过盒子宽度部分省略
                 overflow: hidden; /* 超出部分隐藏 */
                white-space: nowrap; /* 防止换行 */
                text-overflow: ellipsis; /* 超出的文本部分显示省略号 */
                // 字体之间间隔
                 letter-spacing: 0.3vw;
                 margin-top: 4vw;
                font-size: 2.8vw;
                color: #000000;
                margin: 0.9vw 0;
            }
            .admin-button{
                width: 15vw;
                height: 6vw;
                border-radius: 3vw;
                background-color: red;
                text-align: center;
                font-size: 3.3vw;
                letter-spacing: 0.6vw;
                background: linear-gradient(to right, #ffc850, #fa7212);
                 color: #fff; /* 设置字体颜色为白色 */
                 line-height: 6vw;
            }
            .score{
                position: absolute;
                width: 9vw;
                height: 4vw;
                font-size: 2.8vw;
                // letter-spacing: 0.7vw;
                top:58%;
                z-index: 99;
                text-align: center;
                color: #fff;
                // background-color: red;
            }
            .number{
                 position: absolute;
                width: 22vw;
                height: 4vw;
                font-size: 3.0vw;
                top:46%;
                // 透明度
                opacity: 0.8;
                z-index: 99;
                // text-align: center;
                color: #fff;
                 box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.3); /* 底部阴影 */
                 letter-spacing: 0.3vw;
                /* 背景半透明，增强可读性 */
                font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, Segoe UI, Arial, Roboto, 'PingFang SC', miui, 'Hiragino Sans GB', 'Microsoft Yahei', sans-serif;
                background-color: rgba(0, 0, 0, 0.5); /* 半透明黑色背景 */
            }
            .time{
               span{
                display: inline-block;
                padding: 0;
                margin: 0;
                margin-bottom: 2vw;
                width: 100%;
                color: #999999;
                font-size: 2.7vw;
               }
            }
        }
    }

</style>
